<!--
*  2021-03-15
*  纱线跟踪
-->
<template>
  <div id="app" class="list-track">
    <!-- 头部导航 -->
    <van-nav-bar
      :title="title"
      ref="header"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template slot="right">
        <div @click="onClickScan">扫码筛选</div>
      </template>
    </van-nav-bar>
    <!-- 筛选 -->
    <van-search
      v-model="keyLike"
      placeholder="请输入搜索关键词"
      @search="onGetTableData"
    />
    <!-- 滚动 -->
    <better-scroll
      class="public-scroll"
      :data="tableData"
      :totalPage="totalPage"
    >
      <van-cell-group v-show="tableData.length !== 0">
        <van-cell
          v-for="(data, index) in tableData"
          :key="index"
          :title="'编号: ' + data.no"
        >
          <template slot="label">
            <div class="list-track-cell">
              <span
                >颜色：{{
                  data.colorName +
                  "(" +
                  data.standard +
                  "/" +
                  data.strandNum +
                  ")"
                }}</span
              >
              <span>实际库存: {{ data.stock }}</span>
              <span>预出库: {{ data.expectOut }}</span>
              <span>实际出库: {{ data.ex }}</span>
              <span>区域: {{ data.stockArea }}</span>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        v-show="tableData.length === 0"
        description="暂无数据"
      />
    </better-scroll>
  </div>
</template>

<script>
import { comeBack } from "@/utils/index";
import { getYarnStandardList, getYarnPackageFilter, getYarnStoreByStoreId } from "@/api/yarn";

export default {
  name: "weavingOutboundListTrack",
  data() {
    return {
      title: "纱线跟踪",
      currentPage: 1,
      totalPage: 1,
      tableData: [],
      keyLike: "",
    };
  },
  watch: {
    // 监听designName
    // keyLike(newVal, oldVal) {
    //   // 防止input连续输入时，频繁发请求
    //   clearTimeout(this.timeout);
    //   this.timeout = setTimeout(() => {
    //     // 异步请求
    //     if (oldVal !== newVal) {
    //       this.currentPage = 1;
    //       this.onGetTableData();
    //     }
    //   }, 1000);
    // },
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      this.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }
  },
  methods: {
    //初始化
    initFn(that) {
      that.onGetTableData();
      window.api.addEventListener({
        name:'viewdisappear'
      }, function() {
        window.api.closeWin();
      });
    },
    // 退出登录
    onClickLeft() {
      comeBack();
    },
    // 纱线跟踪
    onGetTableData() {
      this.tableData = [];
      getYarnStandardList(
        {
          pageSize: 100,
          pageNum: this.currentPage,
          standard: this.keyLike,
        },
        (res) => {
          this.tableData = res.list;
        }
      );
    },
    // 查看纱线信息
    onClickScan() {
      const that = this;
      const zyHmsScan = api.require('zyHmsScan');
      zyHmsScan.openDefaultView({}, ret => {
        if(ret.status) {
          let content = ret.result;
          if (content.indexOf(",") != -1) {
            // 生产码
            if (!that.$isJSON(content) || content.indexOf(",") == -1) {
              that.$toast.fail("二位码异常");
              return false;
            }

            let ids = eval(content);
            if (ids.toString().indexOf(",") == -1) {
              that.$toast.fail("二位码异常");
              return false;
            }
            let id = ids.split(",")[0];
            getYarnPackageFilter(id, (res) => {
              that.keyLike = res.standardNo;
              that.onGetTableData();
            });
          } else {
            // 盘库码
            getYarnStoreByStoreId(content, (res) => {
              that.keyLike = res.no;
              that.onGetTableData();
            })
          }
        }
      });
    },
  },
};
</script>

<style lang="scss">
.list-track {
  .public-scroll {
    height: calc(100vh - 108px);
    overflow: hidden;

    .list-track-cell {
      display: flex;
      flex-wrap: wrap;
      span {
        display: flex;
        width: 50%;
        &.active {
          color: #e4393c;
          font-weight: 600;
        }
      }
    }
  }
}
</style>
